<script setup lang="ts">
import { delSPUAPI, getSpuProductAPI, reqSkuList } from '@/apis/spu';
import { useAttrStore } from '@/stores/modules/attr';
import { records, SkuData, SkuInfoData, SPURes, spuResponseData, } from '@/types/spu';
import { onBeforeUnmount, ref, watch } from 'vue';
import skuForm from './skuForm.vue';
import spuForm from './spuForm.vue';

// 控制category组件
const page = ref(1)
const limit = ref(3)
const total = ref(0)
const attrStore = useAttrStore()
const screen = ref(0)

// 定义spu数组
const spuList = ref<records>([])
//控制弹框组件
const dialogVisible = ref(false)
//定义子组件实列
const spu = ref<any>()
const sku = ref<any>()
//监听三级分类id的变化
watch(() => attrStore.c3Id, () => {
    getSpuProduct()
    //获取所有品牌
})
//获取SPU商品
const getSpuProduct = async () => {
    const res: spuResponseData = await getSpuProductAPI(page.value, limit.value, attrStore.c3Id as number)
    spuList.value = res.data.records
    total.value = res.data.total
}
//添加SPU
const addSPU = () => {
    screen.value = 1
    spu.value.initHasAddSPU(attrStore.c3Id)
}

// 修改SPU
const updateSPU = (row: SPURes) => {
    screen.value = 1
    spu.value.initHasData(row)

}
//删除SPU商品
const onConfirm = async (spuId: number) => {
    console.log(spuId);

    await delSPUAPI(spuId)
    if (spuList.value.length > 1) {
        getSpuProduct()
    } else {
        page.value - 1
        getSpuProduct()
    }
    ElMessage.success('删除成功')
}

//当前页码改变
const changePage = (currentPge: number) => {
    page.value = currentPge
    getSpuProduct()
}
//当前页码大小改变
const changePageSize = (pageSize: number) => {
    limit.value = pageSize
    getSpuProduct()
    page.value = 1
}

// 显示sku
const skuList = ref<SkuData[]>([])
const showSku = async (row: SPURes) => {
    dialogVisible.value = true
    const res: SkuInfoData = await reqSkuList(row.id as number)
    skuList.value = res.data
}

// 添加sku
const addSku = (row: SPURes) => {
    screen.value = 2
    sku.value.initskuData(attrStore.c1Id, attrStore.c2Id, row)
}

//子组件绑定的自定义事件
const changeScreen = (num: number) => {
    screen.value = num
}

onBeforeUnmount(()=>{
    attrStore.$reset()
})
</script>

<template>
    <!-- 头部 -->
    <Category :screen="screen"></Category>
    <el-card style="margin: 10px 0px">
        <!-- 展示主体内容 -->
        <div v-show="screen == 0">
            <!-- 添加按钮SPU -->
            <el-button type="primary" icon="Plus" :disabled="attrStore.c3Id ? false : true"
                @click="addSPU">添加SPU</el-button>
            <!-- 表格组件 -->
            <el-table style="margin: 10px 0px;" border :data="spuList">
                <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description"></el-table-column>
                <el-table-column label="SPU操作">
                    <template #="{ row }">
                        <el-button type="primary" icon="Plus" size="small" title="添加SKU"
                            @click="addSku(row)"></el-button>
                        <el-button type="primary" icon="Edit" size="small" title="修改SKU"
                            @click="updateSPU(row)"></el-button>
                        <el-button type="primary" icon="View" size="small" title="查看SKU列表"
                            @click="showSku(row)"></el-button>
                        <el-popconfirm :title="`你确认删除${row.spuName}吗?`" @confirm="onConfirm(row.id)">
                            <template #reference>
                                <el-button type="primary" icon="Delete" size="small" title="删除SPU"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5, 8, 10]"
                :background="true" layout="prev, pager, next, jumper,->,sizes, total," :total="total"
                @current-change="changePage" @size-change="changePageSize" />
        </div>
        <!-- 展示添加spu内容 -->
        <spuForm ref="spu" @changeScreen="changeScreen" v-show="screen == 1"></spuForm>
        <!-- sku卡片组件 -->
        <skuForm ref="sku" @changeScreen="changeScreen" v-show="screen == 2"></skuForm>
    </el-card>
    <!-- 弹框组件 -->
    <el-dialog v-model="dialogVisible">
        <template #header>
            <div style="font-size: 18px;">SKU列表</div>
        </template>
        <el-table border style="margin: 20px 0px;" :data="skuList">
            <el-table-column label="SKU名字" prop="skuName"></el-table-column>
            <el-table-column label="SKU价格" prop="price"></el-table-column>
            <el-table-column label="SKU重量" prop="weight"></el-table-column>
            <el-table-column label="SKU图片">
                <template #="{row}">
                    <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px;">
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

</template>
